import React from 'react'
import PropTypes from 'prop-types'
import TodoTextInput from './TodoTextInput'

const Header = ({ addTodo, error, makePostTodo }) => (
  <header className="header">
    <h1>todos</h1>
    <span>
    <TodoTextInput
      newTodo
      onSave={(text) => {
        if (text.length !== 0) {
          addTodo(text)
        }
      }}
      placeholder="What needs to be done?"
    />
    <button onClick={makePostTodo}>Save</button>
    </span>
    <div>{error}</div>
  </header>
)

Header.propTypes = {
  addTodo: PropTypes.func.isRequired,
  error: PropTypes.string,
  saveTodo: PropTypes.func,
  todos: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    completed: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired
  }).isRequired)
}

export default Header
